<template>
  <div class="app-container">
    <el-row>
      <el-col
        v-for="(item, index) in houstList"
        :key="index"
        :md="6"
        :xs="24"
        :xl="6"
        :lg="6"
      >
        <el-card class="box-card info-box" shadow="hover">
          <div slot="header" class="clearfix">
            <span> {{ item.name }}</span>
            <el-button style="float: right; padding: 3px 5px" size="mini" type="primary">
              <span class="padding-right-xs">{{ item.status_str }}</span><i class="fa fa-arrow-circle-right" />
            </el-button>
          </div>
          <div class="text item el-row--flex">
            <div class="">
              <el-image
                style="width: 80px; height: 80px"
                :src="item.picture"
                fit="contain"
              />
            </div>
            <div class="padding-sm media-desc">
              {{ item.tip }}
            </div>
          </div>
          <div class="bottom clearfix">
            <slot name="foot">
              <el-button
                type="primary"
                size="mini"
                style="margin-right: 10px"
                @click="amend(item, index)"
              >修改</el-button>

              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确认删除吗?"
                @confirm="delectRow(item, index)"
              >
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popconfirm>
            </slot>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Teahouse',
  props: ['houstList'],
  data() {
    return {

    }
  },
  computed: {
  },
  created() {
    console.log(this.name, this.img, this.desc)
  },
  methods: {
    amend(data) {
      this.$emit('amend', data)
    },
    delectRow(data) {
      this.$emit('delectRow', data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-box {
      display: block;
      min-height: 90px;
      background: #fff;
      // box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
      // border-radius: 2px;
      // padding: 10px;
      margin: 10px;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    text-align: right;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
  .media-desc{
    text-overflow: -o-ellipsis-lastline;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
  }
</style>
